import { Button, Modal, Form, Input, Select, DatePicker, Cascader } from 'antd'
import { useState } from 'react'
import Header from '../../../compoennts/studentAbsent/Header'
import AbsentTable from '../../../compoennts/studentAbsent/AbsentTable'
import { FileAddOutlined } from '@ant-design/icons'
import moment from 'moment';
import service from '../../../services/index'
import { useEffect } from 'react'
import AbsentDrawer from '../../../compoennts/studentAbsent/AbsentDrawer'

const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';

const typeOptions = [
    {
        label: '事假',
        value: '事假',
    },
    {
        label: '病假',
        value: '病假',
    },
    {
        label: '其他假',
        value: '其他假',
    },
];
const stateOptions = [
    {label:'待审核',value:'待审核'},
    {label:'已通过',value:'已通过'}
]

function AbsentList(props) {
    const [data, setData] = useState([]);
    const [uploadData, setUploadData] = useState({ Publisher: '杨老师' });
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [form] = Form.useForm(); //创建表单实例
    const [open, setOpen] = useState(false); //控制查看请假申请的抽屉\
    const [Rowdata, setRowdata] = useState({});

    // 点击查看触发，打开抽屉，查看请假申请
    const openDrawer = (data) => {
        setOpen(true)
        // console.log(data)
        setRowdata(data)
    }
    const onClose = () => {
        setOpen(false)
    }

    const columns = [
        {
            title: '序号',
            width: 70,
            dataIndex: 'id',
            key: 'id',
            align: 'center'
        },
        {
            title: '请假学生',
            width: 130,
            dataIndex: 'name',
            key: 'name',
            align: 'center'
        },
        {
            title: '年级班级',
            width: 130,
            dataIndex: 'className',
            key: 'className',
            align: 'center'
        },
        {
            title: '请假类型',
            width: 130,
            dataIndex: 'type',
            key: 'type',
            align: 'center'
        },
        {
            title: '请假时间',
            width: 170,
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
            render: (text) => { return new Date(text).toLocaleString() }
        },
        {
            title: '请假事由',
            width: 280,
            dataIndex: 'reason',
            key: 'reason',
            align: 'center',
            ellipsis: {
                showTitle: false,
            },
            render: (text) => text
        },
        {
            title: '发起人',
            width: 160,
            dataIndex: 'Publisher',
            key: 'Publisher',
            align: 'center'
        },
        {
            title: '发起时间',
            width: 175,
            dataIndex: 'time',
            key: 'time',
            align: 'center'
        },
        {
            title: '请假状态',
            width: 150,
            dataIndex: 'state',
            key: 'state',
            align: 'center',
            render: (text) => {
                if (text == 0) {
                    return <span style={{ color: 'orange' }}>待审核</span>
                } else {
                    return <span style={{ color: 'rgb(0,198,149)' }}>已通过</span>
                }
            }
        },
        {
            title: '操作',
            width: 160,
            dataIndex: 'operation',
            key: 'operation',
            align: 'center',
            render: (_, record) => {
                if (record.state === 0) {
                    return (
                        <>
                            <a className='link_blue'>撤销</a>
                            <a className='link_blue' onClick={() => { openDrawer(record) }}>查看</a>
                        </>
                    )
                } else {
                    return <a className='link_blue' onClick={() => { openDrawer(record) }}>查看</a>
                }
            }
        }

    ];  


    useEffect(() => {
        //获取请假学生列表的函数
        const getAbsentList = async () => {
            let result = await service.AbsentService.getAllAbsent()
            // console.log(result.data)
            setData(result.data)
        }
        getAbsentList()
    }, [JSON.stringify(data)])

    const showModal = () => {
        setIsModalOpen(true);
    };

    // 请假-确定按钮触发
    const handleOk = () => {
        let value = form.getFieldsValue()
        console.log(value)
        let { time } = value
        value.time = time.map(item => {
            return item._d
        })
        setUploadData({ ...uploadData, ...value, Publisher: '杨老师' })

        //请假申请 发送请求
        service.AbsentService.addAbsent(uploadData)
            .then(res => {
                console.log(res)
            }).catch(err => console.log(err))

        // console.log({ ...uploadData, ...value, Publisher: '杨老师' })
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };



    return (
        < div >
            {/* 选择区 */}
            < Header >
                <div>
                    请假状态：<Cascader placeholder="请选择"  options={stateOptions}/>
                </div>
            </Header>

            {/* 表格区 */}
            < AbsentTable columns={columns} rowKey={record => record.id} data={data} >
                <Button type='primary' onClick={showModal}  ><FileAddOutlined />请假</Button>
            </AbsentTable >

            {/* 模态框区 */}
            < Modal title="请假申请" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} cancelText="取消" okText="确定" >
                <Form form={form} name='absentForm' >
                    <Form.Item
                        label={<span style={{ width: '67px' }}>发起人</span>}
                        name="Publisher"
                    >
                        <span>杨老师</span>
                    </Form.Item>
                    <Form.Item
                        label="请假学生"
                        name="name"
                        rules={[{ required: true, message: '请输入学生姓名!' }]}
                    >
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item
                        label="请假类型"
                        name="type"
                        rules={[{ required: true, message: '请选择请假类型!' }]}
                    >
                        <Select options={typeOptions} placeholder="请选择" />
                    </Form.Item>
                    <Form.Item
                        label="起止时间"
                        name="time"
                        rules={[{ required: true, message: '请选择请假起止日期!' }]}
                    >
                        {/* defaultValue={[moment('2015-10-02', dateFormat), moment('2015-10-08', dateFormat)]} */}
                        <RangePicker />
                    </Form.Item>
                    <Form.Item
                        label="请假事由"
                        name="reason"
                        rules={[{ required: true, message: '请输入请假事由!' }]}
                    >
                        <Input.TextArea maxLength={100} showCount placeholder='请输入事由' />
                    </Form.Item>
                </Form>
            </Modal >

            {/* 抽屉-查看请假 */}
            < AbsentDrawer open={open} onClose={onClose} data={Rowdata} />
        </div >
    );
}

export default AbsentList;